<template>
    <div class="by-dianwei">
        <section class="header">
            <ul>
                <li v-for="(item,index) in tabList" :key="item.value" :class="{active:status==index}" @click="changeStatus(index)"><span>{{item}}</span></li>
            </ul>
        </section>
        <section class="body">
            <guzhang v-if="status==0" />
            <chuli v-if="status==1" />
            <gongzuo v-if="status==2" />
            <beijian v-if="status==3" />
        </section>
    </div>
</template>

<script>
import guzhang from "./tab/wx-guzhang";
import chuli from "./tab/wx-chuli";
import gongzuo from "./tab/wx-gongzuo";
import beijian from "./tab/wx-beijian";

export default {
    data() {
        return {
            status: 0,
            tabList: ['故障信息','处理意见', '工作量', '更换备件']
        }
    },
    components:{
        chuli,gongzuo,beijian,guzhang
    },
    methods: {
        changeStatus(index) {
            this.status = index
        }
    }
}
</script>

<style>
</style>
